<template>
    <div>

        <div id="r-result">
            <span>城市名:</span>
            <el-input id="suggestId" placeholder="请输入内容" style="margin-bottom:10px;width: 300px" v-model="keyword" class="input-with-select">
                <el-button slot="append" @click="theLocation" icon="el-icon-search"></el-button>
            </el-input>
        </div>
        <!--地图-->
        <div id="container"></div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                map:null,
                myGeo:null,
                lng:108.463559537031470,
                lat:22.755512046405000,
                keyword:""
            }
        },
        mounted() {
            this.load()

        },
        watch:{

        },
        methods:{
            //地图初始化
            load(){
                this.map = new BMapGL.Map('container', {
                    restrictCenter: false
                });

                this.map.centerAndZoom(new BMapGL.Point(108.463, 22.755), 12);
                this.map.enableScrollWheelZoom(true);
                this.map.setHeading(64.5);
                this.map.setTilt(73);
                var locationControl = new BMapGL.LocationControl();  // 添加比例尺控件
                this.map.addControl(locationControl);

                // 地图点击事件
                this.map.addEventListener('click',e => {
                    //获取点击地图位置的经纬度
                    this.lng = e.latlng.lng
                    this.lat = e.latlng.lat
                    //设置标点
                    this.setPoint()
                    //获取详细地址
                    this.getAddress();
                });
            },
            setPoint(){
                this.map.clearOverlays() //清除之前添加的标点
                var marker = new BMapGL.Marker(new BMapGL.Point(this.lng, this.lat));
                this.map.addOverlay(marker);
            },
            getAddress(){
                // 创建地理编码实例
                let myGeo = new BMapGL.Geocoder();
                let pt = new BMapGL.Point(this.lng, this.lat)
                myGeo.getLocation(pt, result => {
                    if (result){
                        console.log(result)
                        this.$emit("getAddress",result.address + result.content.address_detail.town)
                    }
                });
            },
            theLocation(){
                if(this.keyword != ""){
                    this.map.centerAndZoom(this.keyword,12);      // 用城市名设置地图中心点

                    //创建地址解析器实例
                    this.myGeo = new BMapGL.Geocoder();
                    // 将地址解析结果显示在地图上，并调整地图视野
                    if(this.keyword!= ""){
                        this.myGeo.getPoint(this.keyword, point=>{
                            if(!point){
                                this.$message.error("您选择的地址没有解析到结果!")
                            }else{
                                this.map.centerAndZoom(point, 16);
                            }
                        },this.keyword)
                    }else{
                        this.setPoint()
                    }

                }
            }
        }
    }
</script>

<style lang="less" scoped>
    #container {
        width: 100%;
        height: 450px;
        overflow: hidden;
        margin: 0;
        padding: 0
    }

</style>